<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<import type="js" file="js.jquery" />
<import type="js" file="js.ThinkBox.jquery#ThinkBox" />
<import type="js" file="js.common" />
<import type="css" file="css.global" />
<import type="css" file="js.ThinkBox.css.ThinkBox" />
<import type="css" file="css.form" />
</head>
<body>
<div class="search">
<input type="button" value="弹窗" class="button" id="a1">
<input type="button" value="弹窗" class="button" id="a2">
<input type="button" value="弹窗" class="button" id="a3">
<input type="button" value="弹窗" class="button" id="a4">
<input type="button" value="弹窗" class="button" id="a5">
<input type="button" value="弹窗" class="button" id="a6">
<input type="button" value="弹窗" class="button" id="a7">
<input type="button" value="弹窗" class="button" id="a8">
<input type="button" value="弹窗" class="button" id="a9">
<input type="button" value="弹窗" class="button" id="a10">

</div>
</body>
</html>
<script language="javascript">
$(document).ready(function(){
	$("#a1").click(function(){
		$.ThinkBox(
		        '<div style="width: 300px;padding:10px">我是用弹出层显示的，<br/>按ESC键可以将我关闭！</div>', 
		        {'title' : 'Example-1'}
		    ); 	
	});
	$("#a2").click(function(){
		$.ThinkBox(
		        '<div style="width: 300px;padding:10px">我是用弹出层显示的，我不允许同时被弹出多个，<br/>按ESC键可以将我关闭！</div>',
		        {'title' : 'Example-2', 'dataEle':this}
		    );
	});
	$("#a3").click(function(){
		$.ThinkBox(
		        '<div style="width: 300px;padding:10px">我是用弹出层显示的，<br/>我不允许同时被弹出多个且不能被拖动！</div>',
		        {'title' : 'Example-3', 'dataEle':this, 'modal' : true, 'drag':false, 'escHide':false}
		    );
	});
	$("#a4").click(function(){
		$.ThinkBox(
		        '<div style="width: 300px;padding:10px">我是用弹出层显示的，<br/>2秒后我会自动关闭！</div>',
		        {'title' : 'Example-5', 'dataEle' : this, 'delayClose' : 2000}
		    );
	});
	$("#a5").click(function(){
		$.ThinkBox.tips('我是提示信息...', 0); //第二个参数 type 目前的可选值有 0|error, 1|success, loading
		$.ThinkBox.success('我是成功提示信息！');
		$.ThinkBox.error('我是失败提示信息！');
		var loading = $.ThinkBox.loading('我是loading提示信息！');
	    setTimeout(function(){loading.hide()}, 2000); //加载成功后关闭loading信息
	});
	$("#a6").click(function(){
		$.ThinkBox.msg(
		        '<div style="padding:10px; width:250px; height:150px">有新消息啦！。。。</div>', 
		        {'dataEle' : this, 'locate' : ['left', 'bottom'], 'delayClose' : 5000}
		    ); 
	});
	$("#a7").click(function(){
		$.ThinkBox.alert('你确定吗？', {'okClick' : function(){alert('已经确定！');this.hide()}}); 
	});
	$("#a8").click(function(){
		$.ThinkBox.confirm(
		        '确定or取消？', 
		        {
		            'dataEle' : this,
		            'okClick' : function(){
		                alert('你选择了确定！');
		            },
		            'cancelClick' : function(){
		                alert('你选择了取消！');
		            }
		        }
		    ); 
	});
	$("#a9").click(function(){
		
	});
	$("#a10").click(function(){
		
	});
	$("#a").click(function(){
		
	});
});

</script>  